<script setup>
import { computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useJinnongStore } from "../stores/jinnong";
import { ElMessage, ElMessageBox } from "element-plus";

const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
const IS_MOVE_DEVICE = document.body.clientWidth < 992;
const mode = MSE_IS_SUPPORT ? 0 : 1;
const route = useRoute();
const jinnongStore = useJinnongStore();
const cameras = computed(() => jinnongStore.cameras);
jinnongStore.$subscribe((mutation, state) => {
  const splitNum = Math.ceil(Math.sqrt(state.cameras.length));
  const player = new window.JSPlugin({
    szId: "player",
    szBasePath: "./hik",
    iMaxSplit: splitNum,
    iCurrentSplit: splitNum,
    openDebug: true,
    oStyle: {
      borderSelect: IS_MOVE_DEVICE ? "#000" : "#FFCC00",
    },
  });
  window.addEventListener("resize", () => {
    hikPlayer.value.JS_Resize();
  });
  player.JS_SetWindowControlCallback({
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
      ElMessageBox.alert(
        `<h3>${
          iWndIndex + 1
        }号机位取流失败</h3><div> </div><div>错误代码：${iErrorCode}\n</div><div>错误详情：${
          oError.statusString
        }</div>`,
        `${state.cameras[iWndIndex].name}`,
        {
          dangerouslyUseHTMLString: true,
        }
      );
      document.getElementById(
        "player-container-" + iWndIndex
      ).innerHTML += `<div class="bad_video">${iErrorCode}:  取流失败，详情根据错误码在运管后台进行查询.</div>`;
    },
  });
  state.cameras.forEach((camera, index) => {
    const playURL = camera.videoUrl.replace(
      "1.30.17.186",
      "isecure.jinnongjianguan.com"
    );
    player.JS_Play(playURL, { playURL, mode }, index);
    document.getElementById(
      "player-container-" + index
    ).innerHTML += `<div class="cam_name">${camera.name}</div>`;
  });
  for (var i = state.cameras.length; i < splitNum * splitNum; i++) {
    document.getElementById("player-container-" + i).classList.add("no_video");
  }
});
jinnongStore.loadCameras(route.query.id);

window.addEventListener("resize", () => {
  player.JS_Resize();
});
</script>

<template>
  <div id="player"></div>
</template>

<style>
::-webkit-media-controls {
  display: none !important;
}

@media screen and (max-width: 991px) {
  #player {
    width: calc(100vw - 16px);
    height: calc((100vw - 16px) * 5 / 8);
  }
}

@media screen and (min-width: 992px) {
  #player {
    width: calc(50vw - 8px);
    height: calc((50vw - 8px) * 5 / 8);
  }
}
#player .cam_name {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background-color: #00000088;
  line-height: 24px;
  color: #fff;
  padding: 8px;
  z-index: 101;
}
#player .no_video::after {
  display: flex;
  color: #fff;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  content: "无接入视频";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff88;
}

#player .bad_video {
  display: flex;
  color: #fff;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff9f9f;
  z-index: 100;
}
</style>
